<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="test1">0（信息框，默认）</button><br/>
		<button id="test2">1（页面层）</button><br/>
		<button id="test3">2（iframe层 可以嵌套一个网页）</button><br/>
		<button id="test4">3（加载层）</button><br/>
		<button id="test5">4（tips层）</button><br/>
		<button id="test6">Alert</button><br/>
		<button id="test7">Confirm</button><br/>
		<button id="test8">弹出一块dom区域来</button><br/>
		<button id="test9">绑定多个btn按钮</button><br/>
		
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#test1').click(function() {
				//layer.msg('Hello Layer');
				//layer.msg('Hello Layer!!', {time: 3000});
				//layer.alert('这是一个警告');
				layer.open({
					type: 0,
					content: '弹出的内容'
				});
			})
			
			$('#test2').click(function() {
				layer.open({
					type: 1,
					content: '弹出的内容'
				});
			})
			
			$('#test3').click(function() {
				layer.open({
					type: 2,
					content: 'bootstrap1.html',
					area: ['800px', '700px']
				});
			})
			
			$('#test4').click(function() {
				layer.open({
					type: 3
				});
			})
			
			$('#test5').click(function() {
				layer.open({
					type: 4,
					content: ['这是一个tips提示', '#test5']
				});
			})
			
			$('#test6').click(function() {
				//layer.alert('简单的alert');
				layer.alert(
					'这是一个严重的警告',
					{icon: 2},
					function(index) {
						console.log(index);
						layer.close(index);
					}
				);
			})
			
			$('#test7').click(function() {
				layer.confirm(
					'您确认要删除么?',
					{icon: 3, title: '确认'},
					function(index) {
						layer.close(index);
					},
					function() {
						console.log('取消');
					}
				);
			})
			
			$('#test8').click(function() {
				layer.open({
					type: 1,
					area: ['500px','300px'],
					content: $('#divId')
				});
			})
			
			$('#test9').click(function() {
				layer.open({
					type: 0,
					content: '测试',
					btn: ['按钮1', '按钮2', '按钮3'],
					yes: function(index) {
						console.log('点击了第一个按钮');
						layer.close(index);
					},
					btn2: function() {
						console.log('点击了第二个按钮');
						return false;
					},
					btn3: function() {
						console.log('点击了第三个按钮');
					}
				});
			})
		</script>
	</body>
	<div id="divId" style="display: none;">
		用户名:<input type="text" />
	</div>
</html>
